<template>
  <div class="page">
    <div class="doctorList-title width-style">
      <span class="iconfont icon-doctor" v-show="listName === '医生'"
        >&#xe62c;</span
      >
      <span class="iconfont icon-doctor" v-show="listName === '健康管理师'"
        >&#xe6b5;</span
      >
      <span class="iconfont icon-doctor" v-show="listName === '营养师'"
        >&#xe604;</span
      >
      <span>{{ listName }}</span>
    </div>
    <div class="doctorList-content width-style">
      <el-row :gutter="20">
        <el-col :span="8" v-for="(item, i) in list.slice(0, 3)" :key="i">
          <div class="adviser" @click="goDoctorShow(item.doctorId)">
            <img :src="item.doctorAvatar" class="adviser-photo" />
            <div class="adviser-text">
              <el-row class="each-line">
                <el-col :span="8">
                  <div class="grid-content adviser-info-left">医师：</div>
                </el-col>
                <el-col :span="16">
                  <div class="grid-content adviser-name">
                    {{item.doctorName}}
                  </div>
                </el-col>
              </el-row>
              <el-row class="each-line">
                <el-col :span="8">
                  <div class="grid-content adviser-info-left">所属单位：</div>
                </el-col>
                <el-col :span="16">
                  <div class="grid-content adviser-unit">
                    {{item.unit}}
                  </div>
                </el-col>
              </el-row>
              <el-row class="each-line">
                <el-col :span="8">
                  <div class="grid-content adviser-info-left">个人简介：</div>
                </el-col>
                <el-col :span="16">
                  <div class="grid-content adviser-introduce">
                    {{item.description}}
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8" v-for="(item, i) in list.slice(3, 6)" :key="i">
          <div class="adviser" @click="goDoctorShow(item.doctorId)">
            <img :src="item.doctorAvatar" class="adviser-photo" />
            <div class="adviser-text">
              <el-row class="each-line">
                <el-col :span="8">
                  <div class="grid-content adviser-info-left">医师：</div>
                </el-col>
                <el-col :span="16">
                  <div class="grid-content adviser-name">
                    {{item.doctorName}}
                  </div>
                </el-col>
              </el-row>
              <el-row class="each-line">
                <el-col :span="8">
                  <div class="grid-content adviser-info-left">所属单位：</div>
                </el-col>
                <el-col :span="16">
                  <div class="grid-content adviser-unit">
                    {{item.unit}}
                  </div>
                </el-col>
              </el-row>
              <el-row class="each-line">
                <el-col :span="8">
                  <div class="grid-content adviser-info-left">个人简介：</div>
                </el-col>
                <el-col :span="16">
                  <div class="grid-content adviser-introduce">
                    {{item.description}}
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8" v-for="(item, i) in list.slice(6, 9)" :key="i">
          <div class="adviser" @click="goDoctorShow(item.doctorId)">
            <img :src="item.doctorAvatar" class="adviser-photo" />
            <div class="adviser-text">
              <el-row class="each-line">
                <el-col :span="8">
                  <div class="grid-content adviser-info-left">医师：</div>
                </el-col>
                <el-col :span="16">
                  <div class="grid-content adviser-name">
                    {{item.doctorName}}
                  </div>
                </el-col>
              </el-row>
              <el-row class="each-line">
                <el-col :span="8">
                  <div class="grid-content adviser-info-left">所属单位：</div>
                </el-col>
                <el-col :span="16">
                  <div class="grid-content adviser-unit">
                    {{item.unit}}
                  </div>
                </el-col>
              </el-row>
              <el-row class="each-line">
                <el-col :span="8">
                  <div class="grid-content adviser-info-left">个人简介：</div>
                </el-col>
                <el-col :span="16">
                  <div class="grid-content adviser-introduce">
                    {{item.description}}
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :current-page="page"
      :page-size="pageSize"
      @current-change="handleCurentChange"
      :total="total"
      class="pagination"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: ["listName", "type", "total", "list"],
  data() {
    return {
      //分页器所在页数
      page: 1,
      //每页有几个
      pageSize: 9,
    };
  },
  methods: {
    //页码变化时，触发函数
    async handleCurentChange(value) {
      let res = await this.$api.reqDoctorByPage(this.type, value, 9);
      console.log(res);
      this.list = res.rows;
    },
    //去往医生展示界面
    goDoctorShow(doctorId){
      let link = this.$router.resolve({
        path: "/doctorShow",
        query: { doctorId:doctorId },
      });
      window.open(link.href, "_blank");
    }
  },
};
</script>

<style lang="less" scoped>
.page {
  width: 100%;
  min-width: 1200px;
  text-align: center;
  min-height: calc(100vh - 65.5px);
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  background-color: #f6f7f9;
  .doctorList-title {
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left;
    padding-left: 10px;
    font-size: 18px;
    .icon-doctor {
      font-size: 26px;
      vertical-align: bottom;
      color: @themeColor;
    }
  }
  .doctorList-content {
    margin-bottom: 20px;
    .each-line {
      margin-top: 5px;
    }
    .adviser {
      cursor: pointer;
      margin-top: 20px;
      padding: 5px;
      padding-top: 20px;
      background: #fff;
      height: 330px;
      //   width: 400px;
      .adviser-info-left {
        text-align: right;
      }
      .adviser-photo {
        width: 100px;
        height: 100px;
        border-radius: 50px;
      }
      .adviser-text {
        text-align: left;
        padding-left: 10px;
        padding-right: 10px;
        margin-top: 10px;
        font-size: 14px;
        .adviser-name {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .adviser-unit {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .adviser-introduce {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 5;
          -webkit-box-orient: vertical;
        }
      }
    }
    .pagination {
      margin-top: 20px;
      margin-bottom: 20px;
    }
  }
}
</style>
